<template>
    <div class="hospital">
        <!-- 上报按钮 -->
        <el-button @click='addHospital' size='small'>新增</el-button>

        <!-- 表格 -->
        <el-table
            size='small'
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="编号"
                width="80">
            </el-table-column>
            <el-table-column
                prop="name"
                label="医院名称">
            </el-table-column>
            <el-table-column
                prop="introduce"
                label="医院简介"
                width='200'>
            </el-table-column>
            <el-table-column
                prop="address"
                label="医院地址"
                width='120'>
            </el-table-column>
            <el-table-column
                prop="flags"
                label="标记"
                width='100'>
            </el-table-column>
            <el-table-column
                prop="longitude"
                label="经度"
                width='80'>
            </el-table-column>
            <el-table-column
                prop="latitude"
                label="纬度"
                width='80'>
            </el-table-column>
            <el-table-column
                label="操作"
                width="100">
                <template v-slot="scope">
                    <span @click="toEdit(scope.row)">修改</span>
                    <span @click="toDelete(scope.row)">删除</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            size='small'
            layout="prev, pager, next"
            :page-size='params.pageSize'
            :current-page='params.page'
            @current-change='changePage'
            :total="total">
        </el-pagination>

        <el-dialog title="录入医院信息" :visible.sync="dialogFormVisible" width='60%'>
            {{form}}
            <el-form :model="form">
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="介绍" :label-width="formLabelWidth">
                    <el-input type='textarea' v-model="form.introduce" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="省市区" :label-width="formLabelWidth">
                    <el-cascader
                        v-model="form.pca"
                        :options="pca"
                        :props="{value:'name',label:'name',  expandTrigger: 'hover' }"
                        >
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标记" :label-width="formLabelWidth">
                    <el-input v-model="form.flags" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="经度" :label-width="formLabelWidth">
                    <el-input v-model="form.longitude" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="纬度" :label-width="formLabelWidth">
                    <el-input v-model="form.latitude" autocomplete="off"></el-input>
                </el-form-item>
                
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveHospital">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import axios from '@/http/axios'
import moment from 'moment'
import qs from 'qs'
import pca from '@/assets/pca.json'
export default {
    data(){
        return {
            pca,
            params:{
                page:1,
                pageSize:5
            },
            total:0,
            tableData:[],
            form:{},
            formLabelWidth:'120px',
            dialogFormVisible:false,
            categories:[]
        }
    },
    watch:{
        params:{
            handler:function(){
                this.query_hospital()
            },
            deep:true
        }
    },
    created(){
        this.query_hospital()
    },
    methods:{
        
        toDelete(item){
            let obj = {
                id:item.id
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    url:"http://121.199.29.84:8001/hospital/deleteById",
                    method:'get',
                    params:obj
                }).then((res)=>{
                    this.query_hospital()
                    this.$notify({
                        title: '成功',
                        type: 'success',
                        message: res.data.message
                    });
                   
                })
                
            }).catch(() => {
                this.$notify.info({
                    title: '取消',
                    message: '取消删除'
                });        
            });
        },
        saveHospital(){
            var data = Object.assign({},this.form)
            data.province = data.pca[0]
            data.city = data.pca[1]
            data.area = data.pca[2]
            delete data.pca
            axios({
                url:'http://121.199.29.84:8001/hospital/saveOrUpdate',
                method:'POST',
                data:qs.stringify(data),
                contentType:'application/x-www-form-urlencoded'
            }).then((res)=>{
                this.dialogFormVisible = false
                this.query_hospital()
                this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                });
            })
        },
        
        toEdit(item){
            this.dialogFormVisible = true
            
            this.form = JSON.parse(JSON.stringify(item))
            this.form.pca = []
            this.form.pca.push(item.province,item.city,item.area)
        },
        addHospital(){
            this.dialogFormVisible = true
            this.form = {}
        },
        changePage(page){
            this.params.page = page
        },
        query_hospital(){
            axios({
                url:'http://121.199.29.84:8001/hospital/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                // 分页的总条数
                this.total = res.data.data.total;
                // 表格数据
                this.tableData = res.data.data.list
            })
        },
        
    }
}
</script>
